<template>
	<view class="container">
		<view class="blue-background"></view>
		<!-- 基础信息 -->
		<view class="main-content">
			<view class="card">
			<view class="row">
				<text class="label">标题：</text>
				<text class="value">{{ detail.title }}</text>
			</view>
			<view class="row">
				<text class="label">发布人：</text>
				<text class="value">{{ detail.publisher }}</text>
			</view>
			<view class="row">
				<text class="label">发布时间：</text>
				<text class="value">{{ detail.publishTime }}</text>
			</view>
			<view class="row">
				<text class="label">审核状态：</text>
				<text class="value">
					<text :class="['status', 'status-pending']">待审核</text>
					<text class="slash"> / </text>
					<text :class="['status', 'status-pass']">审核通过</text>
					<text class="slash"> / </text>
					<text :class="['status', 'status-reject']">审核不通过</text>
				</text>
			</view>
			<view class="row">
				<text class="label">审核时间：</text>
				<text class="value">{{ detail.auditTime }}</text>
			</view>
			<view class="row row-multi">
				<text class="label">审核说明：</text>
				<text class="value">{{ detail.auditRemark || '—' }}</text>
			</view>
		</view>

		<!-- 发布内容 -->
			<view class="card">
			<view class="row row-multi">
				<text class="label">发布内容：</text>
				<text class="value content">{{ detail.content }}</text>
			</view>

			<view class="row row-multi">
				<text class="label">图片：</text>
				<view class="value">
					<image
						v-if="detail.image"
						class="cover"
						:src="detail.image"
						mode="aspectFill"
						@click="preview(detail.image)"
					/>
					<text v-else class="empty">无</text>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {
					title: '洗车优惠活动开始领取了',
					publisher: '大美汽修',
					publishTime: '2023/03/10 11:09',
					auditTime: '2023/03/10 15:09',
					auditRemark: '',
					content:
						'活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容。',
					image: '/static/images/xtx/a3dd57da20ac163c39cd55cdf74a3358.png' // 可替换为真实图片
				}
			}
		},
		methods: {
			preview(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: #f6f7fb;
		padding-bottom: 40rpx;
		position: relative;
	}

	/* 顶部蓝色背景层 */
	.blue-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(120deg, #3385fd 0%, #3385fd 100%);
	}

	/* 主体内容悬浮卡片区域 */
	.main-content {
		position: absolute;
		left: 1%;
		right: 1%;
		top: 1rpx;
		z-index: 2;
	}

	.card {
		margin: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
	}

	.row {
		display: flex;
		align-items: flex-start;
		padding: 16rpx 0;
	}

	.row + .row {
		/* 分割线已移除 */
	}

	.row-multi {
		align-items: flex-start;
	}

	.label {
		width: 160rpx;
		color: #111;
		font-size: 30rpx;
		line-height: 40rpx;
		padding-top: 4rpx;
	}

	.value {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		line-height: 44rpx;
	}

	.content {
		white-space: pre-wrap;
		color: #444;
	}

	.cover {
		width: 520rpx;
		height: 320rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.empty {
		color: #b6b6b6;
	}

	.status {
		font-size: 30rpx;
	}

	.status-pending {
		color: #ff3b30;
	}

	.status-pass {
		color: #34c759;
	}

	.status-reject {
		color: #999999;
	}

	.slash {
		color: #c8c8c8;
	}
</style>
